<template>
    <div class="speak">
        <div class="year">
            <div style="background-color: rgba(255,255,255,0.8);">
                <div @click="choose_id(it)" class="item" :class="{ 'isactive': it === year_type }"
                    v-for="it in year_list" :key="it">{{ it }}
                </div>

            </div>
        </div>
        <div class="sepak_body" @scroll="scro" ref="sc">
            <div class="left">
                <el-timeline style="max-width: 40vw">
                    <el-timeline-item v-for="item in talk_list" :key="item._id" center :timestamp="item.publish_time"
                        type='primary' placement="top">
                        <el-card>
                            <Editor style="width: 100%;" v-model="item.rich_text" :mode="'default'"
                                @onCreated="handleCreated" />

                        </el-card>
                    </el-timeline-item>

                </el-timeline>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, shallowRef } from "vue"
import { format } from "@/utils/formatTime"
import { Get_talk_list, Get_talk_diffrent_year } from "@/apis/web/WebApi"
import { type Talks } from "@/types/WebEssay"
import '@wangeditor/editor/dist/css/style.css'
//@ts-ignore
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { ElMessage } from "element-plus"
const currentime = format.formatDate2(Date.now())
const editorRef = shallowRef()
const currentPage = ref(1)
const sc = ref()
const isbottom = ref(false)
const year_type = ref(currentime.year)
const year_list = ref([])
onMounted(() => {
    getyear()
    getData(year_type.value)
})
const handleCreated = (editor: any) => {
    editorRef.value = editor // 记录 editor 实例，重要！
    editorRef.value.disable()
}
const talk_list = ref<Talks[]>([])
const getyear = async () => {
    const result = await Get_talk_diffrent_year()
    result.data.reverse()
    year_type.value = result.data[0]
    year_list.value = result.data

}
const getData = async (year: number) => {
    const result = await Get_talk_list(currentPage.value * 6 - 6, year)
    if (result.data.length === 0) {
        isbottom.value = true
        ElMessage({
            type: "info",
            message: "到底了"
        })
    }
    result.data.publish_time = format.formatDate(result.data.publish_time)
    result.data.forEach((item: any, index: number) => {
        result.data[index].publish_time = format.formatDate(item.publish_time)
    });
    talk_list.value = [...talk_list.value, ...result.data]

}
const scro = (e: any) => {
    if (sc.value.scrollTop + sc.value.clientHeight + 3 >= sc.value.scrollHeight) {
        if (isbottom.value) return
        currentPage.value = currentPage.value + 1
        getData(year_type.value)
    }
}
const choose_id = (id: number) => {
    isbottom.value = false
    year_type.value = id
    talk_list.value = []
    currentPage.value = 1
    getData(year_type.value)
}
</script>

<style scoped lang="scss">
.speak {
    width: 100vw;
    display: flex;
    justify-content: center;

    .year {


        div {
            width: 10vw;
            border-right: 1px solid black;
            font-size: 2vw;
            text-align: center;

            .item {
                padding: 1vw;
            }

            .item:hover {
                background-color: aliceblue;
            }

            .isactive {
                background-color: aliceblue;
            }
        }
    }

    .sepak_body {


        padding: 1vw;
        width: 50%;
        background-color: rgba(255, 255, 255, 0.8);
        overflow-y: scroll;
        height: 90vh;
    }

    :deep(.el-timeline-item__timestamp, .is-top) {
        color: #000;
        font-size: 1.5vw;
    }

    :deep(.el-timeline-item__tail) {
        border-left: 1px solid #000;
    }
}
</style>